<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="add" name="add" value="+">+</button>
    <button @click="del" name="del" value="-">-</button>
    {{a}}
    <HelloWorld :msg="msg" :count="count"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { defineComponent,ref ,toRefs, reactive} from "vue";

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld
  },
  setup() {
    const  msg = ref("测试传值")
    const count2 = reactive({
      a: 1
    })
    const ops = () => {
      const count = ref(0)
      const add = () => { count.value++
        count2.a++
      }
      const del = () => { count.value-- }
      return { count, add, del }
    }

    return {
      msg,
      ...ops(),
      ...toRefs(count2)
    }
  }
})
</script>
